<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-title{
    width: 400px;
    height: 30px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    font-size: 20px;
    left: 20px;
    color: #f5f7f9;
    line-height: 30px;
}
.ivu-layout-sider{
    background: #fff;
}
.ivu-layout-header{
    background: #0e90d2;
    padding-right: 0px;
}
.ivu-layout-header .ivu-menu-dark{
    background: #0e90d2;
}
.layout-nav{
    width: 400px;
    margin: 0 auto;
    margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
}
</style>
<template>
    <div class="layout">
        <Layout style="height:100%;">
            <Header>
                <Menu mode="horizontal" theme="dark" style="{background:'#0e90d2'}"  @on-select = "handletopbar">
                    <div class="layout-title">GIS系统 智能温度监控  管理面板</div>
                    <div class="layout-nav">
                        <Submenu name="2" style="float:right;">
                            <template slot="title">
                                <Icon type="android-people"></Icon>
                                {{userinfo.Uname}}
                            </template>
                            <MenuItem name="login">退出</MenuItem>
                        </Submenu>
                        <MenuItem name="message" style="float:right;">
                            <Icon type="email"></Icon>
                            消息
                        </MenuItem>
                        <MenuItem name="3" style="float:right;">
                            <div @click="handleFullScreen">
                                <Icon type="arrow-expand"></Icon>
                                开启全屏
                            </div>
                        </MenuItem>
                        
                        
                    </div>
                </Menu>
            </Header>
            <Layout style="overflow:auto;">
                <Content :style="{padding: '0', minHeight: '280px', background: '#fff'}">
                    <Layout>
                        <!-- <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}"> -->
                        <Sider hide-trigger :style="{background: '#fff'}">
                            <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']" @on-select = "handleselect">
                                <MenuItem name="home_index">
                                   <Icon type="ios-home-outline"></Icon>
                                    首页
                                </MenuItem>
                                <MenuItem name="devstatus_index">
                                    <Icon type="ios-paper"></Icon>
                                    设备状态
                                </MenuItem>
                                <MenuItem name="historical_index">
                                    <Icon type="ios-pulse"></Icon>
                                    历史温度
                                </MenuItem>
                                <MenuItem name="warnning_index">
                                    <Icon type="ios-bolt"></Icon>
                                    温度告警
                                </MenuItem>
                                <MenuItem name="devgroup_index">
                                    <Icon type="stats-bars"></Icon>
                                    编组详情
                                </MenuItem>
                                <MenuItem name="setting_index">
                                    <Icon type="android-settings"></Icon>
                                    系统设置
                                </MenuItem>
                                <MenuItem name="useradmin_index">
                                    <Icon type="ios-person"></Icon>
                                    用户管理
                                </MenuItem>
                            </Menu>
                        </Sider>
                        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                            <router-view></router-view>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
            <Footer class="layout-footer-center">
                &copy;2016 晶通科技版权所有。</Footer>
        </Layout>
    </div>
</div>
</template>
<script>
    export default {
        data(){
            return {
                isFullScreen:true,
                userinfo:{
                    Uname:''
                }
            }
        },
        created(){
            this.userinfo.Uname = sessionStorage.getItem('Uname');
        },
        methods:{
            handleFullScreen:function(){
                this.isFullScreen = !this.isFullScreen;
                let main = document.documentElement;
                if (this.isFullScreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (main.requestFullscreen) {
                        main.requestFullscreen();
                    } else if (main.mozRequestFullScreen) {
                        main.mozRequestFullScreen();
                    } else if (main.webkitRequestFullScreen) {
                        main.webkitRequestFullScreen();
                    } else if (main.msRequestFullscreen) {
                        main.msRequestFullscreen();
                    }
                }
            },
            handleselect:function(name){
                this.$router.push({name:name})
            },
            handletopbar:function(name){
                if(name==='login'){
                    this.$router.replace({name:'login'});
                }
            }
        }
    }
</script>
<style scoped>
:-webkit-full-screen { 
    
}

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }
</style>
